<template>
  <div class='contain'>
    <van-cell-group>
        <van-field required v-model="submitInfo.name" label="姓名" placeholder="请输入" />
        <van-field v-model="submitInfo.age" label="年龄" placeholder="请输入" />
        <van-field v-model="submitInfo.mail" label="邮箱" placeholder="请输入" />
        <van-field required v-model="submitInfo.id" label="身份证号" placeholder="请输入" />
        <van-field required type="tel" v-model="submitInfo.phone" label="电话" placeholder="请输入" />
        <van-field required v-model="submitInfo.sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
            <template #button>
                <van-button @click="sendSms" style="border-radius:5px" size="small" type="info">发送验证码</van-button>
            </template>
        </van-field>
        <van-field type="digit" v-model="submitInfo.digit" label="整数" placeholder="请输入" />
        <van-field type="number" v-model="submitInfo.number" label="数字" placeholder="请输入" />
        <van-field required type="password" v-model="submitInfo.password" label="密码" placeholder="请输入" />
        <van-field v-model="submitInfo.address" label="地址" placeholder="请输入" />
        <van-field v-model="submitInfo.remark" label="备注" placeholder="请输入" />
    </van-cell-group>
       <van-button @click="clickBtn()" class="footer-btn" type="info"
      >提交</van-button
    >
  </div>
</template>
<script>
  import { Toast, Dialog, Notify  } from "vant";
  import helper from '../../service/helper.js';
  import parameter from '../../service/state.js';
  export default {
    data() {
      return {
          submitInfo:{
              name:"",
              age:"",
              mail:"",
              id:"",
              phone:"",
              sms:"",
              digit:"",
              number:"",
              password:"",
              address:"",
              remark:"",
          }
      };
    },
    components: {

    },
    methods: {
        clickBtn(){
            var flag = this.reg(this.submitInfo)
            if(flag){
                console.log(this.submitInfo);
            }
        },
        reg(submitInfo) {
      //用户名正则/提示文本
      var nameReg = /^[\w\u4e00-\u9fa5]{6,12}$/;
      var objExpNameReg = new RegExp(nameReg);
      var nameRegMessage = "用户名必须为6-12位字母/数字/中文";
      //密码正则/提示文本
      var passwordReg = /^[a-z0-9_-]{6,18}$/;
      var objExpPasswordReg = new RegExp(passwordReg);
      var passwordRegMessage = "密码可以使用a-z,0-9, '-','_',最低三位,最高9位";
      //校验码正则/码提示文本
      var codeReg = /^[a-z0-9]{6}$/;
      var objExpCodeReg = new RegExp(codeReg);
      var codeRegMessage = "验证码不正确";
      
      //非空校验
      if (!submitInfo.name) {
        Toast("请输入姓名");
        return false;
      } else if (!submitInfo.id) {
        Toast("请输入身份证号");
        return false;
      }else if (!submitInfo.phone) {
        Toast("请输入电话");
        return false;
      } else if (!submitInfo.sms) {
        Toast("请输入校验码");
        return false;
      } else if (!submitInfo.password) {
        Toast("请输入密码");
        return false;
      }
      //正则校验
      if (!objExpNameReg.test(submitInfo.name)) {
        Toast(nameRegMessage);
        return false;
      } else if (!objExpPasswordReg.test(submitInfo.password)) {
        Toast(passwordRegMessage);
        return false;
      } else if (!objExpCodeReg.test(submitInfo.sms)) {
        Toast(codeRegMessage);
        return false;
      }
      //接口校验
      console.log("进入接口校验");
      if(submitInfo.sms!="123456"){
        Toast(codeRegMessage)
        return false
      }
      localStorage.setItem("token", JSON.stringify(submitInfo));
      return true;
        },
      sendSms(){
          setTimeout(() => {
            alert("假装验证码：123456")
          }, 1500);
        }
    },
    watch: {

    },
    mounted() {

    },
};
</script>
<style scoped lang="less">
.contain{
    text-align: start;
}
.footer-btn {
  width: 100vw;
  position: fixed;
  bottom: 0;
}
</style>